* {
    box-sizing: border-box;
    outline: none;
}

html {
    font-size: 26rpx;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5em;
    background-color: #f1f1f1;
}

a {
    color: #999;
}

// color
$color:( primary:#db9e3f, "white":#fff, 'black':#000, "dark":#222, dark-1:#333, "grey":#999, light:#f9f9f9);
@each $colorKey,
$color in list {
    .text-#{$colorKey} {
        color: $color;
    }
    .bg-#{$colorKey} {
        background-color: $color;
    }
}

// text
@each $var in (left, center, right) {
    .text-#{$var} {
        text-align: $var;
    }
}

// font-size
$base-font-size:1rem;
$font-sizes:(xs:0.7692, //10px
sm:0.9231, //12px 
md:1, //13px
lg:1.0769, //14px
xl:1.2308, //16px
);
@each $sizekey,
$size in $font-sizes {
    .fs-#{$sizekey} {
        font-size: $size*$base-font-size;
    }
}

// flex
.d-flex {
    display: flex;
}